<template>
  <div class="innerpage" @click="hideSelect">
    <Header active="1"></Header>
    <div
      class="page_banner"
      :style="'background-image:url(' + cateInfo.image + ')'"
    >
      <div class="page-inner">
        <h1 class="f60 font-b">{{ cateInfo.name }}</h1>
      </div>
    </div>
    <Tabs :tabsList="navList" />
    <div class="page-inner page-padding" v-if="dataList">
      <div class="filters search">
        <div class="line">
          <div class="prico"><i class="iconfont icon-sousuo"></i></div>
          <div class="in" @click="stopPropagation">
            <input
              type="text"
              @keyup="Search"
              placeholder="搜索"
              @input="handleInput"
              v-model="searchInp"
              @blur=""
            />
            <div class="select" v-if="selectShow">
              <div class="default" v-if="searchAllList.length == '0'">暂无数据</div>
              <div @click="searchInp=i,selectShow=false" class="item" v-for="(i, ind) in searchAllList" :key="ind">
                {{ i }}
              </div>
            </div>
          </div>
        </div>
        <div class="btns">
          <div class="btn on" @click="handleFilter">檢索</div>
        </div>
      </div>
      <div class="companyList">
        <div class="tr th font-m f20 flex">
          <div class="td td1">公司名稱</div>
          <div class="td td2">公司地址</div>
          <div class="td td3">許可證有效期至</div>
          <div class="td td4">產品数量</div>
        </div>
        <div class="tr flex" v-for="i in dataList">
          <div class="td td1">
            <div class="flex">
              <div class="img"><img :src="i.logo_link" alt="" /></div>
              <div class="alt">{{ i.company_name }}</div>
            </div>
          </div>
          <div class="td td2">
            <span class="b dis_wap">公司地址:</span>{{ i.company_address }}
          </div>
          <div class="td td3">
            <span class="b dis_wap">許可證有效期至:</span
            >{{ i.licence_valid_until }}
          </div>
          <div class="td td4">
            <span class="b dis_wap">產品数量:</span>
            <NuxtLink
              v-if="i.product_count"
              :to="'/Products?certificate_holder=' + i.company_name"
              >{{ i.product_count }}</NuxtLink
            >
            <NuxtLink v-else>{{ i.product_count }}</NuxtLink>
          </div>
        </div>
      </div>
      <!-- Pagination -->
      <Pagination :total="total" :count="3" @change="pageChange" />
    </div>
  </div>
</template>
<script>
import {
  manufacturerList,
  getCloumnList,
  getCategoryList,manufacturer_search_tips
} from "@/api/sections";

export default {
  data() {
    return {
      page: 1,
      total: 0,
      cateInfo: {},
      navList: [],
      dataList: [],
      searchInp: "",
      searchAllList: [],
      selectShow: false,
    };
  },
  mounted: function () {
    this.initData();
  },
  methods: {
    hideSelect(){
      this.selectShow=false;
      this.nameSelectShow=false;
      this.ingredientsSelectShow=false;
    },
    stopPropagation(e){
      e.stopPropagation();
    },
    pageChange(e) {
      this.page = e;
      this.getData();;
      this.$nextTick(function(){
          window.scrollTo(0,0);
      })
    },
	handleFilter(){
		this.initData()
	},
    initData() {
      getCloumnList({ id: 1420 }).then((res) => {
        this.navList = res.data;
      });

      getCategoryList({ cid: 1420 }).then((res) => {
        this.cateInfo = res.data;
      });

      this.getData();
    },
    getData() {
      let post = {
        page: this.page,
		keyword:this.searchInp,
        limit: 10,
      };
      if (this.$route.query.id) {
        post.id = this.$route.query.id;
      }

      manufacturerList(post).then((res) => {
        console.log(res, 1111);
        this.dataList = res.data.data;
        this.total = res.data.totalcount;
      });
    },

    handleInput(e) {
      if (this.searchInp) {
		  
		  manufacturer_search_tips({
		  	keyword: this.searchInp,
		  	maxcount: 20
		  }).then((res) => {
		  	this.searchAllList = res.data
		  	this.selectShow = true;
		  });
      } else {
        this.selectShow = false;
      }
      console.log(e.target.value);
    },
    inputBlurred(){
		this.selectShow = false;
	}
  },
};
</script>